import { Button, Space, Table } from "antd";
import React, { useEffect, useLayoutEffect, useState } from "react";
import { useTextSelection } from 'ahooks';
import { useGlobalContext } from "@/components/global";
import Bus from "@/utils/bus";
const home: React.FC = () => {
    // const { user, setUser, theme, setTheme } = useGlobalContext()
    // console.log(user);
    
    console.log(navigator, '浏览器语言');
    const [count, setCount] = useState(0)
    useEffect(() => {
        setTimeout(() => {
            console.log('执行定时器', '3');
        }, 0)
        new Promise((resolve,rject) => {
            setCount(count + 1)
            console.log('执行promnise', '1');
        })
        setCount(prevState => {
            console.log('执行setState','2', prevState);
            return prevState + 1
        })
    }, [])
    useEffect(() => {
        console.log('useEffect', '后')
    }, [])
    useLayoutEffect(() => {
        console.log('useLayoutEffect', '前')
    }, [])
    const x = 0.1 + 0.2;
    console.log(x, x === 0.3, '0.1+0.2 不等于0.3');
    console.log((0.1 * 10 + 0.2 * 10) / 10, (0.1 * 10 + 0.2 * 10) / 10 === 0.3, '解决办法：(0.1 0.2 乘10) / 10');
    console.log(Number(x.toFixed(1)) === 0.3, '解决办法：toFixed保留一位小数');
    const { text } = useTextSelection();
    const columns = [{ title: '预测版本名称', dataIndex: 'name' }]
    const list = [{ name: '预测版本名称测试' }]
    const deleteListItem = (index, list) => {
        list.splice(index, 1)
    }

    const expandedRowRender = () => {
        const autoColumns = (list) => {
            const columns = list && Object.keys(list[0]).filter(item => item !== 'key').map(((item) => {
                return {
                    title: item,
                    dataIndex: item,
                    key: item,
                }
            }))
            columns.push({
                title: '操作', dataIndex: 'operate', key: 'operate', render: (_, record, index) => {
                    return (
                        <Space>
                            <Button type="link">编辑</Button>
                            <Button type="link" onClick={() => deleteListItem(index, list)}>删除</Button>
                        </Space>
                    )
                }
            })
            return columns
        }
        const list = [
            {
                key: 'name',
                name: 'Lisa',
                age: 18,
                address: 'New York No. 1 Lake Park'
            },
            {
                key: 'age',
                name: 'Bianca',
                age: 22,
                address: 'London No. 1 Lake Park',
            },
            {
                key: 'address',
                name: 'Jack',
                age: 20,
                address: 'Beijing No. 1 Lake Park',
            }
        ]
        const columns = autoColumns(list)
        return <Table bordered dataSource={list} columns={columns} pagination={false} />
    }
    const handleClick = async () => {
        await new Promise((res, rej) => {
            console.log('执行');
            // res(true)
            rej(false)
        })
        console.log('promise执行完毕');
    }
    return <div>
        <Table
            columns={columns}
            dataSource={list}
            pagination={false}
            rowSelection={{ type: 'radio' }}
            expandable={{ expandedRowRender }}
            bordered
        />
        <Space>
            <Button onClick={handleClick}>{'执行promise'}</Button>
            <Button onClick={() => Bus.emit('send', { age: 18, name: '小蓝', address: '成都' })} >{'发送'}</Button>
        </Space>
        <p>
            {'useTextSelection选中的文字：'}
            <br />
            {text}
        </p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus soluta, consequuntur corrupti quam nisi vel libero a molestias excepturi! Ab dolorum atque molestiae sint inventore facere non dolores eligendi perspiciatis!
            Voluptatibus soluta, sint debitis vitae ipsam, explicabo at neque quod, quae deleniti officia. Eligendi asperiores cupiditate voluptatibus, similique nostrum, et nam doloribus explicabo, dolore fugiat ipsum recusandae consectetur ad ullam?
            Adipisci magni quae, ex tempora ut vero consectetur accusamus debitis earum illum at id dicta? Doloribus dolor dignissimos deleniti inventore doloremque sed, nisi dolorem laudantium culpa aliquam, enim libero molestias?
            Id optio cupiditate saepe asperiores impedit debitis autem, soluta delectus pariatur! Dolores nisi nemo laborum unde, repudiandae odit praesentium sequi facere voluptatum aspernatur esse, veniam, hic obcaecati dicta odio culpa!
            Quos, asperiores deserunt laudantium iure, cumque facere recusandae aperiam porro nostrum, inventore nihil est perferendis rerum. Dolorum corrupti, possimus, placeat maxime provident est eius quos aperiam perferendis, repellat qui voluptate.
        </p>
    </div>
}

export default home